<template>
  <div class="register-container">
    <el-form ref="registerForm" :model="registerInfo" :rules="registerRules">
      <el-form-item prop="phone">
        <el-input
          v-model="registerInfo.phone"
          placeholder="请输入手机号码"
          size="medium"
        ></el-input>
      </el-form-item>
      <el-form-item prop="captcha" class="captcha">
        <el-input
          v-model="registerInfo.captcha"
          placeholder="请输入验证码"
          size="medium"
          width="100"
        ></el-input>
        <div class="getCaptcha" @click="sendCaptcha" v-if="!isCaptcha">
          获取验证码
        </div>
        <div class="getCaptcha timer" v-else>{{ this.timer }}s后可重新获取</div>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="registerInfo.password"
          placeholder="请输入密码"
          size="medium"
        ></el-input>
      </el-form-item>
      <el-form-item prop="nickname">
        <el-input
          v-model="registerInfo.nickname"
          placeholder="请输入昵称"
          size="medium"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="registerBtn" @click="register">注册</div>
    <div class="goToLogin" @click="goToLogin">返回登录</div>
  </div>
</template>

<script>
export default {
  name: "Register",

  data() {
    // 自定义手机号码验证规则
    const validPhone = (rule, value, callback) => {
      const phoneRge =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!value) {
        return callback(new Error("请输入电话号码"));
      }

      if (!phoneRge.test(value)) {
        callback(new Error("请输入正确的电话号码"));
      } else {
        callback();
      }
    };
    // 自定义密码校验规则
    const validPwd = (rule, value, callback) => {
      const length = value && value.length;
      const pwdReg = /^[a-zA-Z0-9_]+$/;
      if (!value) {
        callback(new Error("请输入密码"));
      } else if (length < 4) {
        callback(new Error("密码必须大于4位"));
      } else if (length > 12) {
        callback(new Error("密码必须小于12位"));
      } else if (!pwdReg.test(value)) {
        callback(new Error("密码必须是英文数字或下划线组成!"));
      } else {
        callback();
      }
    };
    return {
      registerInfo: {
        phone: "",
        captcha: "",
        password: "",
        nickname: "",
      },
      // 是否获取验证码
      isCaptcha: false,
      // 验证码倒计时时间
      timer: 60,
      //   注册表单验证规则
      registerRules: {
        phone: [{ validator: validPhone, trigger: "blur" }],
        password: [
          // { validator: validPwd, trigger: "blur" }
        ],
        nickname: [
          // { required: true, message: "请输入昵称", trigger: "blur" },
          // {
          //   min: 3,
          //   max: 10,
          //   message: "长度在 3 到 10 个字符",
          //   trigger: "blur",
          // },
        ],
        captcha: [],
      },
    };
  },

  mounted() {},

  methods: {
    // 验证码倒计时
    captchaCountDown() {
      let s = setInterval(() => {
        this.timer--;
        if (this.timer < 0) {
          clearInterval(s);
          this.isCaptcha = false;
        }
      }, 1000);
    },
    // 判断手机号是否注册
    // async phoneIsRegister(phone) {
    //   const { data: res } = await this.$http("/cellphone/existence/check", {
    //     params: {
    //       phone,
    //     },
    //   });
    //   if (res.exist === 1) return this.$message.error("该手机号已注册");
    // },
    // 发送验证码
    async sendCaptcha() {
      const { data: res } = await this.$http("/captcha/sent", {
        params: { phone: this.registerInfo.phone },
      });
      console.log(res);
      this.isCaptcha = true;
      this.captchaCountDown();
    },
    // 验证 验证码是否正确
    async verify() {
      const { data: res } = await this.$http("/captcha/verify", {
        params: {
          phone: this.registerInfo.phone,
          captcha: this.registerInfo.captcha,
        },
      });
      console.log(res);
      if (!res.data) return this.$message.error("你输入的验证码有误");
    },
    // 点击注册按钮时
    register() {
      this.$refs.registerForm.validate(async (valid) => {
        if (!valid) return;
        // 判断手机号是否注册
        // this.phoneIsRegister(this.registerInfo.phone);
        // 验证 验证码是否正确
        this.verify();
        // 注册
        const { data: res } = await this.$http("/register/cellphone", {
          params: { ...this.registerInfo },
        });
        console.log(res);
      });
    },
    // 点击返回登录按钮
    goToLogin() {
      this.$store.commit("updateLoginmode", "1");
    },
  },
};
</script>

<style lang="less" scoped>
.getCaptcha {
  display: inline-block;
  width: 100px;
  height: 30px;
  background-color: #ec4141;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}
.registerBtn {
  width: 80%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 10px;
  margin: 0 auto;
  color: #fff;
  background-color: #ec4141;
}
.timer {
  cursor: not-allowed;
  font-size: 12px;
}
.goToLogin {
  cursor: pointer;
  width: 80px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-top: 10px;
  font-size: 12px;
}
</style>